import React from 'react';
import AgentService from '@/modules/Agent';
import styled from '@emotion/styled';
import { Dropdown, MenuProps } from 'antd';
import AgentDetailsCard from '../AgentDetails';
import Icon from '@/components/Icon';

const DetailDropdown = styled(Dropdown)`
	.ant-dropdown-menu {
		border-radius: 10px;
	}
`;

const StatusDropdown = (props: { setVisibleAgentDetails: (status: boolean) => void }) => {
	const { user } = AgentService;
	const items: MenuProps['items'] = [
		{
			label: <AgentDetailsCard></AgentDetailsCard>,
			key: '0'
		}
	];
	return (
		<>
			{/* 签入状态 */}
			<DetailDropdown placement="bottomRight" getPopupContainer={() => AgentService.rootContainer} menu={{ items }} trigger={['click']} overlayClassName="agent-status-detail-dropdown">
				<span
					className="username"
					onClick={e => {
						e.preventDefault();
						e.stopPropagation();
						props.setVisibleAgentDetails(false);
					}}
				>
					{user && user.userName} <Icon classname="icon-widget-xiajiantou icon"></Icon>
				</span>
			</DetailDropdown>
		</>
	);
};

export default StatusDropdown;
